<template>
  <div class="app-container">
    <el-row>
      <el-col :span="9">
        <div>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="区域" prop="aid">
              <el-select v-model="queryParams.aid" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.aid"
                  :label="item.label"
                  :value="item.aid">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          提示：
          <el-button size="small" type="warning" plain disabled>已出售</el-button>
          <el-button size="small" type="primary" plain disabled>未出售</el-button>
        </div>
        <br/>
        <div v-for="(item,index) in carportnumber" style="float: left">
          <el-button  size="small" :type="buttonQieh(item.pid)" plain @click="carportWithMap(item,index)">{{ item.carportname }}</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <div>
            <el-descriptions class="margin-top":column="1" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-truck"></i>
                  车位名
                </template>
                {{ carportMap.carportName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  车位买主
                </template>
                {{ carportMap.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  买主电话
                </template>
                {{ carportMap.phone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-timer"></i>
                  成交时间
                </template>
                {{ carportMap.selldate }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-star-on"></i>
                  成交金额
                </template>
                {{ carportMap.sellPrice }} RMB
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <div v-if="carportMap.carportName == null || carportMap.carportName == ''">
          <el-result icon="success" title="该车位未出售" subTitle="请根据提示进行操作">
            <template slot="extra">
              <el-button  type="info" size="medium" @click="enteringplatenumber">录入车牌</el-button>
              <el-button  type="primary" size="medium">去购买</el-button>
            </template>
          </el-result>
          </div>
          <div v-else-if="carportMap.name != null">
            <el-result icon="error" title="该车位已出售" subTitle="请根据提示进行操作">
              <template slot="extra">
              </template>
            </el-result>
          </div>
        </div>
      </el-col>
    </el-row>


    <!-- 添加或修改车位授权对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-upload
        class="upload-demo"
        drag
        :on-success="handleSuccess"
        action="http://localhost:8080/system/platenumber/upload-platenumber"
        file>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <br/>
      <el-form ref="form" :model="form" label-width="80px">
        识别的车牌号为(上传文件，自动识别)：<el-input v-model="form.platenumber"  prop="cid" />
        车位号：<el-input v-model="form.cid" prop="platenumber"/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getcarportWithMap, listCarportInfo} from "../../../api/system/carport";
import {addplatenumberinfo} from "../../../api/system/carportinfo";

export default {
  name: "Area",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      title: "",
      // 是否显示弹出层
      open: false,
      form: {
        cid:'',
        platenumber: null,
      },
      // 车位区域表格数据
      carportnumber: [],
      // 查询参数
      queryParams: {
        aid: '1',
      },
      carportMap:{
        carportName:'',
        name:'',
        phone:'',
        selldate:'',
        sellPrice:null,
      },
      options: [{
        aid: '1',
        label: 'A'
      }, {
        aid: '2',
        label: 'B'
      }, {
        aid: '3',
        label: 'C'
      }, {
        aid: '4',
        label: 'D'
      }, {
        aid: '5',
        label: 'E'
      }],
    };
  },
  created() {
    this.getList();
  },
  methods: {

    buttonQieh(pid){
      console.log(pid)
      if (pid == null){
        return "primary"
      }
      else {
        return "warning"
      }
    },

    enteringplatenumber(){
      this.title="车位绑定车牌号";
      this.open = true;
    },
    handleSuccess(response,file){
      this.form.platenumber = response;
      console.log(response);
    },

    getList() {
      this.loading = true;
      listCarportInfo(this.queryParams).then(response => {
        console.log(response.rows)
        this.carportnumber = response.rows;
        this.loading = false;
      });
    },
    carportWithMap(item){
      console.log(item.carportname)
      this.form.cid = item.id;
      getcarportWithMap(item.id).then(response =>{
        this.carportMap = response;
      });
    },
    lookCar(item,index){
      console.log(item.id,index);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(valid);
          addplatenumberinfo(this.form).then( response =>{
            this.$modal.msgSuccess("添加成功!");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

  }
};
</script>
